<template>
  <div>
    <nav-header></nav-header>

    <!-- 搜索部分 -->
    <header class="header-search">
      <div class="search">
        <div>
          <span class="search_text">时间：</span>

          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            class="search_box"
          >
          </el-date-picker>
        </div>

        <div>
          <span class="search_text">班级：</span>
          <el-select
            v-model="searchParams.class_id"
            clearable
            placeholder="请选择班级"
            style="width: 188px"
          >
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          <span class="search_text">教师：</span>
          <el-select
            v-model="searchParams.teacher_id"
            clearable
            placeholder="请选择教师"
            style="width: 188px"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          <span class="search_text">科目：</span>
          <el-select
            v-model="searchParams.subject_id"
            clearable
            placeholder="请选择科目"
            style="width: 188px"
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <el-button class="btn_width" type="primary" @click="handleSearch">
          搜索
        </el-button>

        <el-button type="primary" class="reset_btn" @click="handleReset">
          重置
        </el-button>
      </div>

      <div>
        <el-button type="primary" @click="handleExport">导出数据</el-button>
        <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
      </div>
    </header>

    <div>
      <el-table
        class="video_table"
        :data="listData"
        @selection-change="changeHander"
        border
        max-height="600"
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" align="center" fixed />
        <el-table-column
          label="序号"
          type="index"
          :index="typeIndex"
          align="center"
          width="50"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="course_time"
          label="上课时间"
          align="center"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="subject_name"
          label="上课科目"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="class_name"
          label="上课班级"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="teacher_name"
          label="授课老师"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="attend_str"
          label="考勤人数(应到/实到/迟到/请假/早退/缺勤)"
          align="center"
          show-overflow-tooltip
          width="280"
        />

        <el-table-column
          prop="teacher_mode"
          label="授课模式"
          align="center"
          width="100"
          show-overflow-tooltip
        />

        <el-table-column
          prop="interaction_num"
          label="师生互动频率"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="student_rate"
          label="学生参与率"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="course_score"
          label="课程得分"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="5"
          label="操作"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button @click="editReport(scope.row)" type="text"
              >编辑</el-button
            >

            <el-button @click="viewReport(scope.row)" type="text"
              >查看报告</el-button
            >

            <el-button
              @click="delReport(scope.row.course_id)"
              type="text"
              class="delete-button"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination" v-show="searchParams.data_sum > 10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParams.page_index"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="searchParams.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchParams.data_sum"
        >
        </el-pagination>
        <div class="pagination-button">
          <el-button
            @click="getList"
            type="primary"
            icon="el-icon-refresh"
            circle
            title="刷新数据"
            size="mini"
          >
          </el-button>
        </div>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="eidtModal"
      width="400px"
    >
      <el-form
        ref="formRef"
        :model="aiForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="上课时间" prop="time">
          <el-date-picker
            style="width: 100% !important;"
            v-model="aiForm.time"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学科" prop="subject_id">
          <el-select v-model="aiForm.subject_id" placeholder="请选择学科">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="上课班级" prop="class_id">
          <el-select v-model="aiForm.class_id" placeholder="请选择上课班级">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="授课老师" prop="teacher_id">
          <el-select v-model="aiForm.teacher_id" placeholder="请选择授课老师">
            <el-option
              v-for="item in teacherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        subject_id: [
          { required: true, message: "请选择学科", trigger: "blur" }
        ],
        class_id: [
          { required: true, message: "请选择上课班级", trigger: "blur" }
        ],
        teacher_id: [
          { required: true, message: "请选择授课老师", trigger: "blur" }
        ],
        time: [
          {
            required: true,
            message: "请选择上课时间",
            trigger: "blur"
          }
        ]
      },

      aiForm: {
        time: [],
        subject_id: "",
        class_id: "",
        teacher_id: "",
        course_id: ""
      },

      eidtModal: false,
      total_number: 0,
      listData: [],
      teacherOptions: [], // 教师选项
      classOptions: [], // 班级选项
      subjectOptions: [],
      searchParams: {
        page_index: 1,
        page_size: 10,
        class_id: "",
        teacher_id: "",
        subject_id: ""
      },
      timeValue: [],
      selectData: []
    };
  },
  methods: {
    handleCancel() {
      this.eidtModal = false;
      this.$refs.formRef.resetFields();
    },
    // 序号
    typeIndex(index) {
      return (
        index +
        (this.searchParams.page_index - 1) * this.searchParams.page_size +
        1
      );
    },
    init() {
      this.getClassOption();
      this.getTeacherOption();
      this.getSubjectOption();
      this.getList();
    },

    // 编辑报告
    editReport(row) {
      console.info(row);
      this.aiForm.course_id = row.course_id;
      const isExitTeacher = this.teacherOptions.find(
        item => item.value === row.teacher_id
      );
      if (isExitTeacher) {
        this.aiForm.teacher_id = row.teacher_id;
      } else {
        this.aiForm.teacher_id = "";
      }

      const isExitSub = this.subjectOptions.find(
        item => item.value === row.subject_id
      );
      if (isExitSub) {
        this.aiForm.subject_id = row.subject_id;
      } else {
        this.aiForm.subject_id = "";
      }

      const isExitClass = this.classOptions.find(
        item => item.value === row.class_id
      );
      if (isExitClass) {
        this.aiForm.class_id = row.class_id;
      } else {
        this.aiForm.class_id = "";
      }

      let end_time = row.end_time;
      if (row.end_time === "0000-00-00 00:00:00") {
        end_time = row.start_time;
      }
      this.aiForm.time = [row.start_time, end_time];
      this.eidtModal = true;
    },

    // 编辑
    handleConfirmEdit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const {
            course_id,
            time,
            class_id,
            subject_id,
            teacher_id
          } = this.aiForm;
          const params = {
            course_id,
            subject_id,
            class_id,
            teacher_id,
            start_time: time[0],
            end_time: time[1]
          };

          if (params.start_time === params.end_time) {
            params.end_time = "";
          }

          const success = res => {
            const { status, msg } = res;

            if (status === "success") {
              this.$message.success("修改成功");
              this.eidtModal = false;
              this.getList();
            } else {
              this.$message.error(msg);
            }
          };

          this.$ajax.put("api/ainew/aiVideoList", params, {
            func: {
              success
            }
          });
        }
      });
    },

    // 删除单个
    delReport(id) {
      const cancel = () => {};
      const yes = () => {
        const params = {
          course_id: id
        };
        const success = res => {
          const { status, msg } = res;
          if (status === "success") {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.error(msg);
          }
        };
        const fail = err => {
          this.$message.error(err);
        };
        this.$ajax.delete("api/ainew/aiVideoList", {
          params,
          func: { success, fail }
        });
      };
      this.e_confirm({ yes: yes, cancel: cancel, txt: "确定删除所选项？" });
    },

    // 删除多个
    handleBatchDel() {
      if (this.selectData.length === 0) {
        this.$message.warning("请选择要删除的选项");
        return;
      }
      const ids = this.selectData.map(item => item.course_id);
      this.delReport(ids);
    },

    // 数据导出
    handleExport() {
      const { selectData } = this;
      const ids = selectData.map(item => item.course_id);

      if (ids) {
        this.searchParams.course_id = ids;
      }

      this.export_excel(
        "api/ainew/aiVideoListExcel",
        this.searchParams,
        "AI课程管理数据"
      );
    },

    // 搜索
    handleSearch() {
      const [start_time, end_time] = this.timeValue;

      if (start_time) this.searchParams.start_time = start_time;
      if (end_time) this.searchParams.end_time = end_time;
      this.searchParams.page_index = 1;
      console.info(this.searchParams);
      this.getList();
    },

    // 重置
    handleReset() {
      this.searchParams = {
        page_size: 10,
        page_index: 1
      };
      this.timeValue = [];
    },
    // 每页数量改变
    handleSizeChange(size) {
      console.info(size);
      this.searchParams.page_size = size;
      this.getList();
    },

    // 当前第几页
    handleCurrentChange(index) {
      this.searchParams.page_index = index;
      this.getList();
    },

    // 获取列表数据
    getList() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          const { page_index, data_sum, page_size } = data;
          this.listData = data.data;
          this.searchParams.page_index = Number(page_index);
          this.searchParams.data_sum = data_sum;
        }
      };

      this.$ajax.get("api/ainew/aiVideoList", {
        params: this.searchParams,
        func: { success }
      });
    },

    // 表格选中
    changeHander(selectData) {
      this.selectData = selectData;
    },

    viewReport(selectData) {
      if (!selectData.status_m3u8) {
        return this.$message.error("视频正在转码中，无法查看当前报告");
      }
      this.apc =
        `&CheckSchoolAppCode=` + sessionStorage.getItem("CheckSchoolAppCode");
      let host_addr = sessionStorage.getItem("host_addr");
      let host = host_addr.split("://")[1];
      let token = sessionStorage.getItem("redirect_params");
      let url =
        `${host_addr}${token}&host=${host}&routerUrl=/ai-analysis&id=${selectData.course_id}` +
        this.apc;
      window.open(url);
    },

    // 获取教师选项
    getTeacherOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.teacherOptions = data.map(item => {
            return {
              value: item.id,
              label: item.name
            };
          });
        }
      };
      const params = {
        role_id: 6,
        status: 1
      };
      this.$ajax.get("api/user/user", { params, func: { success } });
    },

    // 获取班级选项
    getClassOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.classOptions = data.map(item => {
            return {
              value: item.id,
              label: item.rename
            };
          });
        }
      };
      const params = {
        status: [1]
      };
      this.$ajax.get("api/org/classes", { params, func: { success } });
    },

    // 获取科目选项
    getSubjectOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.subjectOptions = data.map(item => {
            return {
              value: item.subject_id,
              label: item.subject_name
            };
          });
        }
      };
      const params = {
        status: [1]
      };
      this.$ajax.get("api/cate/subject_data", { params, func: { success } });
    }
  },

  created() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.header-search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search {
    display: flex;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }

    .search_text {
      width: 45px;
    }

    .search_box {
      width: 188px;
    }

    .reset_btn {
      color: #7c9bb8 !important;
      background-color: #deefff !important;
      border: none;
      width: 82px;
    }

    .btn_width {
      width: 82px;
    }
  }
}

.video_table {
  margin-top: 26px;
}

.date_time {
  width: 100% !important;
}
</style>
